<template>
    <div class="principle">
        <LaserRadarHeader />

        <principle-list-view />

        <span v-show="PrincipleComponent.Default.Description.value != ''">
            {{ PrincipleComponent.Default.Description.value }}
        </span>
        <!-- <div audio v-show="PrincipleComponent.Default.Description.value != ''">
            <span :style="descriptionStyle">
                {{ PrincipleComponent.Default.Description.value }}
            </span>
            <img src="/public/static/LaserRadar/icon-foldout.png" alt="音频" title="" @click="OnSwitch">
        </div> -->

        <LaserRadarAside />
    </div>
</template>

<script setup lang="ts">
import LaserRadarHeader from './LaserRadarHeader.vue';
import LaserRadarAside from './LaserRadarAside.vue';
import PrincipleListView from './PrincipleListView.vue';
import { PrincipleComponent } from './LaserRadarComponent';
import { computed, onMounted, onUnmounted, reactive } from 'vue';

// const stats = reactive({ pausable: false });
// function OnSwitch(): void { 
//     PrincipleComponent.Default.DescriptionAudioAccessibility.value = !PrincipleComponent.Default.DescriptionAudioAccessibility.value;
//     stats.pausable = !stats.pausable;
//     // MMWRNavRef.value.changeModel()
// }

// const descriptionStyle: ComputedRef<StyleValue> = computed(
//     () => {
//         return {
//             visibility: PrincipleComponent.Default.DescriptionAudioAccessibility.value ? 'visible' : 'hidden',
//         } as StyleValue;
//     }
// );

onMounted(() => PrincipleComponent.Default.Awake());
onUnmounted(() => PrincipleComponent.Default.Destroy());
</script>

<style scoped>
.principle>span {
    position: absolute;
    bottom: 6rem;
    left: 50%;

    transform: translateX(-50%);

    max-width: 100rem;

    padding: 2rem;

    background-color: #131620;
    border-radius: 2rem;

    color: #BEBEFF;
    font-size: 1.8em;

    text-indent: 2em;
}
</style>